Description

This pull request enhances how user vault balances are displayed across the Earn product, improving clarity and consistency for both ETH and DVV vaults. It introduces a more flexible balance prop, shows balances in both base and share tokens, and adds USD value display where available. Several style updates and code refactors support these improvements.

Vault Balance Display Improvements:

• Refactored the balance display logic in VaultCard and TopSection components to support both "share" and "base" token amounts, as well as USD equivalents. This includes a new VaultBalanceProp type and conditional rendering for USD values and tooltips. [1] [2] [3] [4] [5]
• Updated ETH and DVV vaults to provide both share and base token balances, and to pass these values through to the UI. ETH vaults now show ETH and share token balances, with USD value where available. [1] [2] [3] [4] [5] [6]

Styling and UI Enhancements:

• Added new styled components for displaying sub-values (e.g., USD amounts) under the main balance, and improved responsive layout for vault statistics. [1] [2] [3]

Code Cleanup and Refactoring:

• Removed unused or redundant code related to the old balance display, such as the VaultPosition component in ETH vault deposit requests. [1] [2] [3]
• Updated hooks to provide both ETH and USD values for vault positions, and ensured all relevant components consume these values. [1] [2]

Prop and Type Updates:

• Added and plumbed the new balance prop through VaultPage and related components to support the improved balance display. [1] [2] [3]

These changes collectively improve the user experience by making vault balances clearer and more informative, especially for users interacting with multiple token types and currencies.

Checklist:

• Checked the changes locally.
• Created / updated analytics events.
• Created / updated the technical documentation (README.md / docs / etc.).
• Affects / requires changes in other services (Matomo / Sentry / CloudFlare / etc.).